import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Cell, Image, List } from 'react-vant'
// 函数组件
const App = () => {
  const [pageCode, setPageCode] = useState(1);
  // 数据容器
  const [data, setData] = useState([]);

  const getData = async () => {
    // 异步请求数据
    const res = await axios.get('/api/list', { params: { pageCode } })
    setData(data.concat(res.data.data));
    setPageCode(pageCode + 1);
  }
  // 副作用函数
  // useEffect(() => {
  //   getData()
  // }, [])
  return (
    <List onLoad={getData}>
      {
        data.map(v => {
          return <Cell key={v.id} title={v.title} label={v.desc} icon={<Image width={44} height={44} src={v.image} />} />
        })
      }
    </List>
  );
};

export default App